<template>
    <div class="page">
        <p>集群图</p>
        <div id="container"></div>
        <p>极坐标下的集群图</p>
        <div id="container2"></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    data() {
        return {
            city: {
                name: "中国",
                children: [
                    {
                        name: "浙江",
                        chilren: [
                            { name: "杭州" },
                            { name: "宁波" },
                            { name: "温州" },
                            { name: "绍兴" }
                        ]
                    },
                    {
                        name: "广西",
                        children: [
                            {
                                name: "桂林",
                                children: [
                                    { name: "秀峰区" },
                                    { name: "叠彩区" },
                                    { name: "象山区" },
                                    { name: "七星区" }
                                ]
                            },
                            { name: "南宁" },
                            { name: "柳州" },
                            { name: "防城港" }
                        ]
                    },
                    {
                        name: "广西",
                        children: [
                            {
                                name: "桂林",
                                children: [
                                    { name: "秀峰区" },
                                    { name: "叠彩区" },
                                    { name: "象山区" },
                                    { name: "七星区" }
                                ]
                            },
                            { name: "南宁" },
                            { name: "柳州" },
                            { name: "防城港" }
                        ]
                    },
                    {
                        name: "广西",
                        children: [
                            {
                                name: "桂林",
                                children: [
                                    { name: "秀峰区" },
                                    { name: "叠彩区" },
                                    { name: "象山区" },
                                    { name: "七星区" }
                                ]
                            },
                            { name: "南宁" },
                            { name: "柳州" },
                            { name: "防城港" }
                        ]
                    }
                ]
            }
        }
    },
    methods: {
        draw() {
            let svgWidth = 800,
                svgHeight = 800
            this.svg = d3
                .select("#container")
                .append("svg")
                .attr("width", svgWidth)
                .attr("height", svgHeight)
            let root = d3.hierarchy(this.city)
            let clusterLayout = d3.cluster().size([svgWidth - 100, svgHeight - 100])
            clusterLayout(root)
            let gCluster = this.svg
                .append("g")
                .attr("transform", `translate(${40},${0})`)
            gCluster
                .append("g")
                .attr("fill", "none")
                .attr("stroke", "#555")
                .attr("stroke-opacity", 0.4)
                .attr("stroke-width", 1.5)
                .selectAll(".link")
                .data(root.links())
                .join("path")
                .attr("class", "link")
                .attr(
                    "d",
                    d3
                        .linkHorizontal()
                        .x(d => d.y)
                        .y(d => d.x)
                )
            let node = gCluster
                .append("g")
                .attr("stroke-linejoin", "round")
                .attr("stroke-width", 3)
                .selectAll("g")
                .data(root.descendants())
                .join("g")
                .attr("transform", d => `translate(${d.y},${d.x})`)
            node.append("circle")
                .attr("fill", d => (d.children ? "#555" : "$999"))
                .attr("r", 2.5)
            node.append("text")
                .attr("dy", "0.31em")
                .attr("x", d => (d.children ? -5 : 5))
                .attr("text-anchor", d => (d.children ? "end" : "start"))
                .text(d => d.data.name)
                .clone(true)
                .lower()
                .attr("stroke", "white")
                .attr('stroke-width',10)
        },
        draw2(){
            let svgWidth = 800,
                svgHeight = 800
            this.svg = d3
                .select("#container2")
                .append("svg")
                .attr("width", svgWidth)
                .attr("height", svgHeight)
            let root = d3.hierarchy(this.city)
            let clusterLayout = d3.cluster()
            .size([360, svgWidth/2 - 100])
            .separation((a,b)=>(a.parent === b.parent ?1 :2) /a.depth)
            clusterLayout(root)
            let gCluster = this.svg
                .append("g")
                .attr("transform", `translate(${svgWidth/2},${svgHeight/2})`)
            gCluster
                .append("g")
                .attr("fill", "none")
                .attr("stroke", "#555")
                .attr("stroke-opacity", 0.4)
                .attr("stroke-width", 1.5)
                .selectAll(".link")
                .data(root.links())
                .join("path")
                .attr("class", "link")
                .attr(
                    "d",
                    d3
                        .linkRadial()
                        .angle(d => d.x/180*Math.PI)
                        .radius(d => d.y)
                )
            let node = gCluster
                .append("g")
                .attr("stroke-linejoin", "round")
                .attr("stroke-width", 3)
                .selectAll("g")
                .data(root.descendants())
                .join("g")
                .attr("transform", d => `rotate(${d.x-90}) translate(${d.y})`)
            node.append("circle")
                .attr("fill", d => (d.children ? "#555" : "$999"))
                .attr("r", 2.5)
            node.append("text")
                .attr("dy", "0.31em")
                // .attr("x", d => (d.children ? -5 : 5))
                .attr('transform',d=>{
                    return d.x<180?"translate(8)":'rotate(180)translate(-8)'
                })
                .attr("text-anchor", d => d.x<180?'start':'end')
                .text(d => d.data.name)
                .clone(true)
                .lower()
                .attr("stroke", "white")
                .attr('stroke-width',10)
        }
    },
    mounted() {
        this.draw()
        this.draw2()
    }
}
</script>
